<template>
    <div class="hospital">
      <!-- 左侧导航区域 -->
      <div class="menu">
        <div class="top">
          <el-icon><HomeFilled /></el-icon>
          <span> / 医院信息</span>
        </div>
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :router="true">
          <el-menu-item
            index="/hospital/register"
            :route="{path:'/hospital/register',query:{hoscode:$route.query.hoscode}}"
          >
            <el-icon><icon-menu /></el-icon>
            <span>预约挂号</span>
          </el-menu-item>
          <el-menu-item index="/hospital/detail" :route="{path:'/hospital/detail',query:{hoscode:$route.query.hoscode}}">
            <el-icon><document /></el-icon>
            <span>医院详情</span>
          </el-menu-item>
          <el-menu-item index="/hospital/notice" :route="{path:'/hospital/notice',query:{hoscode:$route.query.hoscode}}">
            <el-icon><setting /></el-icon>
            <span>预约通知</span>
          </el-menu-item>
          <el-menu-item index="/hospital/close" :route="{path:'/hospital/close',query:{hoscode:$route.query.hoscode}}">
            <el-icon><InfoFilled /></el-icon>
            <span>停诊信息</span>
          </el-menu-item>
          <el-menu-item index="/hospital/search" :route="{path:'/hospital/search',query:{hoscode:$route.query.hoscode}}">
            <el-icon><Search /></el-icon>
            <span>查询/取消</span>
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 右侧内容展示区域:路由组件展示位置 -->
      <div class="content">
        <!-- 子组件展示结构地方 -->
        <router-view></router-view>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  //左侧菜单需要用到的图标
  import {
    Document,
    Menu as IconMenu,
    Setting,
    InfoFilled,
    Search,
    HomeFilled,
  } from "@element-plus/icons-vue";
  import useDetailStore from '@/store/modules/hospitalDetail'
  let detailStore = useDetailStore()
  //获取当前路由的信息
  let $route = useRoute()
  onMounted(()=>{
    // 获取医院详情数据
    detailStore.getHospital($route.query.hoscode as string)
    //获取某一个医院科室的数据
    detailStore.getDeparment($route.query.hoscode as string);
  })
  </script>
  
  <style scoped lang="scss">
  .hospital {
    display: flex;
    .menu {
      flex: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      .top {
        color: #7f7f7f;
      }
    }
    .content {
      flex: 8;
    }
  }
  </style>
  